import React, {  useEffect, useRef } from 'react'
import { Popup,Button, Radio, Form, Input,  Toast  } from 'antd-mobile'

import url from '../config/url'
import req from '../http/req'
const EditDialog = (props) => {
    const save = () => {
        formRef.current
            .validateFields([
                'username',
                'password',
                'mobile',
                'email',
                'gender',
                'status',
            ])
            .then((res) => {
                req.put(url.EditUserData + props.uid, res).then((rest) => {
                    if (rest.data.errNo === 0) {
                        Toast.show({
                            icon: 'success',
                            content: '修改成功',
                          })
                        props.closeDrawer()
                        props.fup()
                    } else {
                        Toast.show({
                            icon: 'fail',
                            content: res.data.errText,
                          })
                    }
                })
            })
    }

    const onFinish = () => {
        props.closeDrawer()
    }

    const formRef = useRef()
    useEffect(() => {
        console.log(url.DetailUserData +props.uid);
        req.get(url.DetailUserData + props.uid).then((res) => {
            const { username, mobile, email, gender, status } =
                res.data.userInfo
            formRef.current.setFieldsValue({
                username,
                mobile,
                email,
                gender,
                status,
            })
        })
    }, [])// eslint-disable-line react-hooks/exhaustive-deps

    return (
        <>
            {/* <Mask visible={true} > */}
            <Popup
              visible={true}
              showCloseButton
              onClose={() => {
                props.closeDrawer()
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '20vh',
              }}
            >
                <Form layout='horizontal' onFinish={onFinish} ref={formRef}>
                    <Form.Header>修改用户信息</Form.Header>
                    <Form.Item label='用户名' name='username'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='密码' name='password'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='邮箱' name='email'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name='gender'
                    >
                        <Radio.Group>
                            <Radio value="1"> 男 </Radio>
                            <Radio value="2"> 女 </Radio>
                            <Radio value="3"> 保密 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name='status'
                    >
                        <Radio.Group>
                            <Radio value="1"> 正常 </Radio>
                            <Radio value="2"> 禁用 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label='手机号' name='mobile'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item >
                        <Button  onClick={save} type="primary">
                            确定修改
                        </Button>
                    </Form.Item>
                </Form>
            </Popup>
        </>
    )
}

export default EditDialog